<nz-card>
    <div class="common-search-wrap">
        <div class="common-search-forms">
            <div class="common-form-item">
                <label class="common-search-label">订单编号</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入订单号"
                        [(ngModel)]="queryForm.orderNum"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">关联回收单号</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入关联回收单号"
                        [(ngModel)]="queryForm.renewalNo"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">汇款识别码</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入汇款识别码"
                        [(ngModel)]="queryForm.transferCode"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">支付方式</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzPlaceHolder="请选择支付方式"
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        [(ngModel)]="queryForm.payTypeList">
                        <nz-option
                            *ngFor="let option of payTypeOptions"
                            [nzLabel]="option.label"
                            [nzValue]="option.value"
                        ></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">商品</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入商品编号或名称"
                        [(ngModel)]="queryForm.goodsName"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">用户</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入收货人/手机号码/用户ID"
                        [(ngModel)]="queryForm.user"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">物流单号</label>
                <div class="common-search-conrol">
                    <input
                        nz-input
                        placeholder="请输入物流单号"
                        [(ngModel)]="queryForm.expressNo"
                    />
                </div>
            </div>

            <div class="common-form-item">
                <label class="common-search-label">用户类型</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzAllowClear
                        nzPlaceHolder="请选择"
                        [(ngModel)]="userTypeSelected"
                        (ngModelChange)="userTypeChange($event)">
                        <nz-option nzValue="0" nzLabel="未选择身份"></nz-option>
                        <nz-option nzValue="1" nzLabel="C端用户"></nz-option>
                        <nz-option nzValue="2" nzLabel="B端商户"></nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">订单渠道</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzAllowClear
                        [nzMaxTagCount]="1"
                        nzMode="multiple"
                        nzPlaceHolder="请选择"
                        [(ngModel)]="queryForm.platformList">
                        <nz-option
                            *ngFor="let channel of channelSelects"
                            [nzValue]="channel.content"
                            [nzLabel]="channel.name">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">订单状态</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择"
                        [(ngModel)]="queryForm.orderStateList"
                        (ngModelChange)="onSelectAll($event)">
                        <nz-option nzLabel="全部" nzValue="all"></nz-option>
                        <nz-option *ngFor="let item of orderStateSet | keyvalue" nzLabel="{{item.value}}"
                            nzValue="{{item.key}}">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">订单来源</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择"
                        [(ngModel)]="scurceSelected"
                        (ngModelChange)="multipleChange($event, 'sourcePlatform')">
                        <nz-option
                            *ngFor="let val of orderSourceOptions"
                            [nzLabel]="val.name"
                            [nzValue]="val.content">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">推广渠道</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择推广渠道"
                        [(ngModel)]="queryForm.cidList">
                        <nz-option
                            *ngFor="let val of extensionOptions"
                            [nzLabel]="val.name"
                            [nzValue]="val.content">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">货主</label>
                <div class="common-search-conrol">
                    <nz-select
                        nzShowSearch
                        nzAllowClear
                        nzMode="multiple"
                        [nzMaxTagCount]="1"
                        nzPlaceHolder="请选择货主"
                        [(ngModel)]="queryForm.supplierIdList">
                        <nz-option
                            *ngFor="let val of supplierOptions"
                            [nzLabel]="val.name"
                            [nzValue]="val.id">
                        </nz-option>
                    </nz-select>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">下单时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.dateFormat"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">付款时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.paymentTime"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">发货时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.shipTime"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item" [hidden]="!isCollapse">
                <label class="common-search-label">完成时间</label>
                <div class="common-search-conrol">
                    <nz-range-picker [nzFormat]="'yyyy-MM-dd'" [(ngModel)]="queryForm.completeTime"></nz-range-picker>
                </div>
            </div>

            <div class="common-form-item">
                <button nz-button nzType="primary" (click)="query()">查询</button>
                <button nz-button nzType="default" (click)="resetData()">重置</button>
                <button nz-button nzType="link" (click)="isCollapse = !isCollapse">
                    {{ isCollapse ? '收起' : '展开' }}<i nz-icon [nzType]="isCollapse ? 'up' : 'down'" nzTheme="outline"></i>
                </button>
            </div>
        </div>
    </div>
</nz-card>

<nz-card class="m-t-2">
    <div nz-row nzJustify="space-between" class="opera-btns p-b-10">
        <div class="opera-lf">
            <button nz-button nzType="primary" (click)="toAdjustOrder()" *ngIf="permission.userPermission.has('order:parts:add')">新建调节订单</button>
            <button nz-button nzType="primary" (click)="showModal()" *ngIf="permission.userPermission.has('order:parts:check')">批量审核</button>
            <!-- 2021/09/15 17:38 -->
            <button nz-button nzType="primary" (click)="goodsDeliver()" *ngIf="permission.userPermission.has('order:parts:shipments')">批量发货</button>
            <button nz-button nzType="primary" (click)="exportModal(1)" *ngIf="permission.userPermission.has('order:parts:export')">导出主信息</button>
            <button nz-button nzType="primary" (click)="exportModal(2)" *ngIf="permission.userPermission.has('order:parts:exportDetail')">导出明细信息</button>
        </div>
    
        <div class="opera-rt">
          <nz-radio-group
            nzButtonStyle="solid"
            [(ngModel)]="quickScreenSelected"
            (ngModelChange)="quickScreenChange($event)">
            <label
              *ngFor="let option of quickScreenStatus"
              nz-radio-button
              [nzValue]="option.value">
              {{ option.label }}
            </label>
          </nz-radio-group>
        </div>
    </div>

    <main class="my-table">
        <div class="tableTh">
            <div class="tableAll">
                <label nz-checkbox [(ngModel)]="checked" (ngModelChange)="onAllChecked($event)"></label>
            </div>
            <nz-table class="tab-border">
                <thead>
                    <tr>
                        <th nzAlign="left" style="padding-left: 20px;">商品</th>
                        <th nzAlign="center">价格/数量</th>
                        <th nzAlign="center">应收金额</th>
                        <th nzAlign="center">实收金额</th>
                        <th nzAlign="center">收货人/联系电话</th>
                        <th nzAlign="center">地址</th>
                        <th nzAlign="center">物流信息</th>
                        <th nzAlign="center">订单状态</th>
                        <th nzAlign="center">操作</th>
                    </tr>
                </thead>
            </nz-table>
        </div>
        <!-- <div class="noData" *ngIf="searchHint && listOfData?.records">
            <span>搜索 “{{searcName}}”，找到&nbsp;{{ listOfData?.total }}&nbsp;条结果</span>
            <a (click)="backList()">返回原列表</a>
        </div> -->
        <div class="tableMain" *ngFor="let list of listOfData?.records; let k=index">
            <div class="tableCheck">
                <label
                    nz-checkbox
                    [(ngModel)]="list.Checked"
                    (ngModelChange)="onItemChecked(list.id, $event)"
                    [nzDisabled]="list.statusTest != '待审核'">
                </label>
            </div>
            <div class="tableBox">
                <div class="tableTitle">
                    <div>
                        <ng-container *ngFor="let channelItem of channelSelects">
                            <nz-tag
                                *ngIf="channelItem.content == list.platform"
                                [nzColor]="channelItem.color">
                                {{ channelItem.name }}
                            </nz-tag>
                        </ng-container>
        
                        <nz-tag [nzColor]="'#2db7f5'" *ngIf="list.userType == 2">B端</nz-tag>
                        <nz-tag [nzColor]="'#87d068'" *ngIf="list.userType == 1">C端</nz-tag>

                        <ng-container *ngFor="let extension of extensionOptions">
                            <nz-tag
                                *ngIf="extension.content == list.cid"
                                nzColor="warning">
                                {{ extension.name }}
                            </nz-tag>
                        </ng-container>

                        <nz-tag nzColor="processing" *ngIf="list?.sourceType">{{ dictTextFilter(list?.sourceType, orderSourceOptions) }}</nz-tag>
                        <span>id: {{list.id}}</span>
                        <span>订单号: {{list.orderNum}}</span>
                        <span>关联回收单号: {{list.renewalNo || '-'}}</span>
                        <span *ngIf="list.transferCode">
                            汇款识别码: {{list.transferCode}}
                        </span>
                        <span>
                            支付方式: 
                            <i [ngStyle]="{'color': list.payType | partsOrderPayType: 'color'}">
                                {{list.payType | partsOrderPayType: 'label'}}
                            </i>
                        </span>
                        <!-- <span>订单状态： {{list.statusTest}}</span> -->
                        <span>下单时间: {{list.createTime}}</span>
                        <!-- <span>成交时间: {{list.dealTime ?list.dealTime : '-'}}</span> -->
                        <span>付款时间: {{list.payTime ?list.payTime : '-'}}</span>
                        <span>发货时间: {{list.shipTime ?list.shipTime : '-'}}</span>
                    </div>
    
                    <div>
                        <button
                            *ngIf="list.oldList.length"
                            nz-button
                            nzType="link"
                            (click)="viewChildModel(list)">
                            {{ list?.oldList.length }}
                            个子订单
                        </button>
                        <a
                            *ngIf="!list.oldList.length && list.supplierName"
                            nz-button
                            nzType="link"
                            target="_blank"
                            [routerLink]="['/stock/sqeAdd', list.supplierId]">
                            [{{ list.supplierId }}]{{ list.supplierName }}
                        </a>
                    </div>
                </div>

                <nz-table nzBordered [nzShowPagination]="false" [nzData]="list.orderDetailsList">
                    <tbody>
                        <tr *ngFor="let item of list.orderDetailsList; let i=index">
                            <!-- 商品 -->
                            <td style="border-right:none">
                                <div class="goodsName">
                                    <img nz-image nzSrc="{{item.icon}}" [nzFallback]="fallback" />
                                    <div class="goodsText">
                                        <a href=".#/goods/goodsTabs/{{item.goodsId}}" target="_blank" title="{{item.goodsName}}">{{item.goodsName}}</a>
                                        <!-- <span title="{{item.goodsName}}" (click)="toGoodsInfo(item.goodsId)">{{item.goodsName}}</span> -->
                                        <p>{{item.goodsId ?item.goodsId :'-'}}</p>
                                    </div>
                                </div>
                            </td>
                            <!-- 价格/数量 -->
                            <td nzAlign="center" style="border-right: 1px solid #e7eaef">
                                {{item.price}}元
                                <br>
                                {{item.num}}件
                            </td>
                            <ng-container *ngIf="i == 0">
                                <!-- 应收金额 -->
                                <td nzAlign="center" rowSpan="{{list.length}}">￥{{list.totalPrice | number : '0.2-2' }}</td>
                                <!-- 实收金额 -->
                                <td nzAlign="center" rowSpan="{{list.length}}">
                                    <p>现金:<span class="p-l-5">￥{{list.realPrice | number : '0.2-2' }}</span></p>
                                    <p *ngIf="list.aiDouAmount">爱豆:<span class="p-l-5">￥{{ list.aiDouAmount || '0' }}</span></p>
                                </td>
                                <!-- 买家/收货人 -->
                                <td nzAlign="center" rowSpan="{{list.length}}">
                                    {{list.consignee}}
                                    <span [class]="list?.numberCount ? 'href-span' : ''" (click)="quantityNumSearch(list)">
                                        ({{ list?.numberCount || 0 }}单)
                                    </span>
                                    <br>
                                    {{list.tel}}
                                </td>
                                <!-- 地址 -->
                                <td nzAlign="center" rowSpan="{{list.length}}">
                                    {{list.address}}
                                    <!-- 物流信息 -->
                                <td nzAlign="center" rowSpan="{{list.length}}" style="padding-left: 20px;">
                                    {{list.orderExpressList.length!=0 ?
                                    expressCode_To_Text(list.orderExpressList[0].expressCode) : '-'}}
                                    <br>
                                    {{list.orderExpressList !=0? list.orderExpressList[0].expressNum : '-'}}
                                </td>
                                <!-- 订单状态 -->
                                <td nzAlign="center" class="{{getStatusColor(list.status)}}" rowSpan="{{list.length}}">
                                    {{list.statusTest}}
                                </td>
                                <td nzAlign="center" rowSpan="{{list.length}}">
                                    <a
                                        *ngIf="permission.userPermission.has('order:parts:detail')"
                                        nz-button
                                        nzType="link"
                                        nzSize="small"
                                        [routerLink]="['../accDetails',list.id]">
                                        查看详情
                                    </a>
                                    <!-- <button
                                        *ngIf="permission.userPermission.has('order:parts:check')"
                                        nz-button
                                        nz-button-tdlink
                                        nzType="link"
                                        [disabled]="list.statusTest != '待审核'"
                                        (click)="showModal(list)">
                                        审核
                                    </button> -->
                                    <a
                                        *ngIf="permission.userPermission.has('order:parts:track')"
                                        nz-button
                                        nzType="link"
                                        nzSize="small"
                                        (click)="followModal(list.orderNum)">
                                        跟进
                                    </a>
                                    <a
                                        *ngIf="permission.userPermission.has('order:parts:delete')"
                                        nz-button
                                        nzType="link"
                                        nzSize="small"
                                        nzDanger
                                        nz-popconfirm
                                        nzPopconfirmTitle="确认删除？请谨慎操作"
                                        (nzOnConfirm)="deleteItemData(list)">
                                        删除
                                    </a>

                                    <a
                                        *ngIf="list.payWay === 1 && list.status === 2"
                                        nz-button
                                        nzType="link"
                                        nzSize="small"
                                        (click)="confirmCollection(list)">
                                        确认收款
                                    </a>
                                </td>
                            </ng-container>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </div>
    </main>

    <!-- pagination -->
    <div class="pagination-box">
        <ng-template #totalTemplate let-total> 共有 {{ total }} 条 </ng-template>
        <nz-pagination
            nzSize="default"
            [nzPageSizeOptions]="[10, 20, 50, 100]"
            nzShowSizeChanger
            nzShowQuickJumper
            [nzPageIndex]="queryForm.page"
            [nzTotal]="listOfData?.total"
            [nzShowTotal]="totalTemplate"
            [nzPageSize]="listOfData?.size"
            (nzPageIndexChange)="onPageIndexChange($event)"
            (nzPageSizeChange)="onPageSizeChange($event)">
        </nz-pagination>
    </div>
</nz-card>

<nz-modal
    [(nzVisible)]="isVisible"
    nzTitle="审核"
    [nzWidth]="600"
    [nzFooter]="null"
    (nzOnCancel)="handleCancel()">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label [nzSpan]="4">审核意见</nz-form-label>
            <nz-form-control [nzSpan]="19">
                <textarea rows="6" nz-input [(ngModel)]="auditDesc" nzPlaceHolder="请输入审核意见"></textarea>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control [nzSpan]="18" [nzOffset]="4">
                <button nz-button nzType="primary" (click)="save(5)">通过({{selectArr.length}})</button>
                <button nz-button nzType="primary" (click)="save(4)">不通过({{selectArr.length}})</button>
                <button nz-button nzType="primary" nzDanger (click)="examineMerge()">审核通过并合并发货({{selectArr.length}})</button>
                <!-- <button nz-button nzType="default" (click)="handleCancel()">取消</button> -->
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="exportVisible" nzTitle="导出信息" (nzOnCancel)="handleCancel()" [nzFooter]="null">
    <ng-container *nzModalContent>
        <nz-form-item>
            <nz-form-label [nzSpan]="9">请选择要导出的时间范围</nz-form-label>
            <nz-form-control [nzSpan]="14">
                <nz-range-picker [(ngModel)]="exportDate"></nz-range-picker>
            </nz-form-control>
        </nz-form-item>
        <nz-form-item>
            <nz-form-control [nzSpan]="18" [nzOffset]="9">
                <button nz-button nzType="primary" (click)="exportOrder()">确定</button>
                <button nz-button nzType="default" (click)="handleCancel()">取消</button>
            </nz-form-control>
        </nz-form-item>
    </ng-container>
</nz-modal>

<nz-modal [(nzVisible)]="followVisible" nzTitle="跟进" (nzOnCancel)="handleCancel()" [nzFooter]="null"
    [nzWidth]="'1050px'">
    <ng-container *nzModalContent>
        <div class="importBox">
            <textarea rows="6" nz-input [(ngModel)]="followParam.content" placeholder="请输入内容，限制100字"
                [maxlength]="100"></textarea>
            <div class="bt-box">
                <label for="file" class="followFile">
                    <span>选择文件</span>
                    <input id="file" type="file" multiple="multiple" [(ngModel)]="inputVal"
                        (change)="handleFileInput($event,2)">
                </label>
                <font>请选择图片、office文件、PDF文件</font>
                <button nz-button nzType="primary" (click)="followerSave()">提交</button>
            </div>
            <ul>
                <li *ngFor="let item of followParam.enclosure; index as i">
                    <span>{{item.showUrl}}</span>
                    <a nz-button nz-button-tdlink nzType="link" (click)="deleteFollowImg(i)">删除</a>
                </li>
            </ul>
        </div>
        <app-follow-component *ngIf="followParam.relationInformation" [id]="followParam.relationInformation" type="1">
        </app-follow-component>
    </ng-container>
</nz-modal>

<!-- 子订单 -->
<nz-modal
    nzClassName="child-model"
    [nzWidth]="800"
    [(nzVisible)]="isChildVisible"
    nzTitle="子订单"
    [nzFooter]="null"
    (nzOnCancel)="childCancel()">
    <ng-container *nzModalContent>
        <nz-table
            style="margin: 0;"
            #orderChildTable
            nzSize="small"
            nzBordered
            [nzShowPagination]="false"
            [nzData]="childTableData">
            <thead>
                <tr>
                    <th nzAlign="center">订单编号</th>
                    <th nzAlign="center">状态</th>
                    <th nzAlign="center">货主</th>
                    <th nzAlign="center">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of orderChildTable.data">
                    <td nzAlign="center">{{ data.orderNum }}</td>
                    <td nzAlign="center" class="{{ getStatusColor(data.status) }}">
                        {{ status_To_Text(data.status) }}
                    </td>
                    <td nzAlign="center">{{ data.supplierName || '-' }}</td>
                    <td nzAlign="center">
                        <a
                            *ngIf="permission.userPermission.has('order:parts:track')"
                            nz-button
                            nzType="link"
                            (click)="childFollow(data)"
                        >跟进</a>
                        <a
                            *ngIf="permission.userPermission.has('order:parts:detail')"
                            nz-button
                            nzType="link"
                            target="_blank"
                            (click)="childDetail(data)"
                        >查看详情</a>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </ng-container>
</nz-modal>
